<template>
  <div class="wrap">
    <header class="header">
      <div class="left" @click="$router.back()"></div>
    </header>

    <div class="main wrap" v-if="catalog">
      <!-- todo 头部 -->
      <div class="head">
        <div class="img">
          <img :src="catalog.book.coverImage" alt="" />
        </div>
        <div class="text">
          <div class="name">
            <h3>{{ catalog.book.title }}</h3>
            <p>{{ catalog.book.author }}</p>
          </div>
          <!-- <div class="tips">
            <span>完结</span>
            <span>678万字</span>
            <span>0.7书豆/千字</span>
          </div> -->
        </div>
      </div>
      <!-- todo 头部 -->

      <!-- todo 详情 -->
      <div class="introduce" v-if="detailsData">
        <div class="title">
          <h2>内容简介</h2>
        </div>
        <div :class="['content', { s_open: is_sopen }]">
          <span>{{ detailsData.summary }}</span>
          <div class="btn" @click="is_sopen = !is_sopen">
            <i class="iconfont icon-arrow-down-bold"></i>
          </div>
        </div>
        <div class="type">
          <span>{{ detailsData["pris:book"].category }}</span>
        </div>
      </div>
      <!-- todo 详情 -->

      <!-- todo 目录  -->
      <div class="list">
        <div
          class="item"
          @click="reader(catalogList[catalogList.length - 1].uuid)"
        >
          <div class="title">最新</div>
          <div class="info">
            <p>{{ catalogList[catalogList.length - 1].title }}</p>
            <i class="icon-arrow-right-bold iconfont"></i>
          </div>
          <div class="line"></div>
        </div>
        <router-link tag="div" :to="'/catalog?id=' + bookId" class="item">
          <div class="title">目录</div>
          <div class="info">
            <p>共{{ catalogList.length }}章</p>
            <i class="icon-arrow-right-bold iconfont"></i>
          </div>
          <div class="line"></div>
        </router-link>
      </div>
      <!-- todo 目录  -->

      <!-- todo 相关推荐 -->
      <div class="list1 l_type1">
        <div class="title">
          <span>猜你喜欢</span>
          <div class="more" @click="bookSort(mbLike)">换一换</div>
        </div>
        <div class="content">
          <a
            class="item"
            v-for="(vl, i) in mbLike"
            :key="vl.bookId"
            v-show="i < 3"
            @click="orderBook(vl.bookId)"
          >
            <div class="img">
              <img :src="vl.imgUrl" alt="" />
            </div>
            <div class="text">
              <h3>{{ vl.bookName }}</h3>
              <p>{{ vl.authorName }}</p>
            </div>
          </a>
        </div>
      </div>
      <!-- todo 相关推荐 -->

      <!-- todo 目录 -->
      <div :class="['cata', { open: isOpen }]">
        <div class="title">
          <h3>目录</h3>
          <span @click="isOpen = !isOpen">展开</span>
        </div>
        <div
          v-for="vl in catalogList"
          :key="vl.uuid"
          @click="reader(vl.uuid)"
          class="item one-txt-cut"
        >
          {{ vl.title }}
        </div>
      </div>
      <!-- todo 目录 -->

      <!-- todo 图书信息 -->
      <div class="info">
        <div class="title">
          <h2>图书信息</h2>
        </div>
        <div class="content">
          <dl>
            <dt>版权来源</dt>
            <dd>书旗小说</dd>
          </dl>
          <dl>
            <dt>免责声明</dt>
            <dd>
              本书数字版权由原创版权提供，授权本软件使用、制作、发行，若包含不良信息，请及时告知客服。
            </dd>
          </dl>
        </div>
      </div>
      <!-- todo 图书信息 -->
    </div>

    <!-- todo 底部按钮 -->
    <div class="bottom_bar wrap" v-if="detailsData && catalog">
      <div class="line"></div>
      <div :class="['item1', { con: isAdd }]" @click="add">
        {{ isAdd ? "已加书架" : "加入书架" }}
      </div>
      <div class="item2" @click="continue_reader">继续阅读</div>
    </div>
    <!-- todo 底部按钮 -->

    <div class="loadingBox" v-if="!catalog">
      <van-loading text-color="#fff" color="#ffffff" size="24px" vertical>
        加载中...
      </van-loading>
    </div>
  </div>
</template>

<script>
import { getDetailsData, getCatalogData } from "../api/details";
import { getGirlClassify } from "../api/classify";
export default {
  data() {
    return {
      bookId: null, //书籍Id
      detailsData: null, // 书籍详情
      catalog: null, // 书籍列表
      catalogList: null, // 目录
      is_sopen: false, // 详情内容
      isOpen: false, // 目录闭合
      userInfo: null, // 用户数据
      isAdd: false, // 是否加入书架
      mbLike: null, //猜你喜欢
    };
  },
  methods: {
    // 书籍详情
    getDetailsDataFun() {
      getDetailsData({ id: this.bookId }).then((data) => {
        // this.detailsData = data;
        // console.log(this.detailsData);
        this.detailsData = data.feed.entry;
        console.log("书籍详情==>", this.detailsData);
      });
    },
    // 书籍列表
    getCatalogDataFun() {
      getCatalogData({ source_uuid: this.bookId })
        .then((data) => {
          this.catalog = data.data;

          this.catalogList = data.data.catalog.filter(
            (vl) => !vl.needPay && "needPay" in vl
          );

          console.log("目录列表==>", this.catalogList);
        })
        .catch(() => {
          console.log("hhhhhh");
        });
    },
    // 用户数据
    getUserDataFun() {
      let userId = localStorage.getItem("userId");

      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

      if (this.bookId in this.userInfo[userId].Purchased) {
        console.log("");
      } else {
        this.userInfo[userId].Purchased[this.bookId] = [];
      }

      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));

      if (this.userInfo[userId].bookList) {
        // 判断该书籍是否已经加入书架
        let isLike = this.userInfo[userId].bookList.findIndex(
          (vl) => vl.bookId == this.bookId
        );

        if (isLike == -1) {
          this.isAdd = false;
        } else {
          this.isAdd = true;
        }
      }
    },
    // 加入书架
    add() {
      this.isAdd = true;

      let userId = localStorage.getItem("userId");
      let isLike = this.userInfo[userId].bookList.findIndex(
        (vl) => vl.bookId == this.bookId
      );
      if (isLike == -1) {
        this.userInfo[userId].bookList.push({
          bookId: this.bookId,
          bookImg: this.catalog.book.coverImage,
          bookName: this.catalog.book.title,
          checked: false,
        });
      }

      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
    },
    // 跳转阅读
    reader(contentId) {
      this.$router.push({
        path: "/content",
        query: {
          bookId: this.bookId,
          contentId,
        },
      });
    },
    // 继续阅读功能
    continue_reader() {
      let userId = localStorage.getItem("userId");
      let historyId = this.userInfo[userId].history[this.bookId];
      this.$router.push({
        path: "/content",
        query: {
          bookId: this.bookId,
          contentId: historyId,
        },
      });
    },
    // 打乱列表顺序
    bookSort(array) {
      array.sort(() => (Math.random() > 0.5 ? 1 : -1));
    },
    orderBook(id) {
      this.bookId = id;
    },
  },
  created() {
    this.bookId = this.$route.query.id;
    this.getUserDataFun();
    this.getDetailsDataFun(); // 书籍详情
    this.getCatalogDataFun(); // 书籍列表
    getGirlClassify().then((data) => {
      console.log(data.modulesInfos[1].data.books);
      this.mbLike = data.modulesInfos[1].data.books;
    });
  },
  watch: {
    bookId: function () {
      this.getDetailsDataFun();
      this.getCatalogDataFun();
    },
  },
};
</script>

<style lang="scss" scoped>
header.header {
  height: 50px;
  position: sticky;
  top: 0;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  background: #fff;
  z-index: 1000;

  > .left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto;
    transform: rotate(180deg);
    background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
      no-repeat;
    background-size: contain;
    width: 12px;
    height: 20px;
  }

  > .title {
    color: #333;
    font-weight: bold;
    line-height: 50px;
    font-size: 18px;
  }
}

.main {
  box-sizing: border-box;
  padding: 0 16px 110px;

  // todo 头部
  > .head {
    padding: 32px 0 24px;
    display: flex;

    > .img {
      width: 109px;
      height: 145px;
      margin-right: 16px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0px 12px 20px 0px rgb(0 0 0 / 8%);

      > img {
        width: 100%;
        height: 100%;
      }
    }

    > .text {
      flex: 1;
      margin: 4px 0;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      > .name {
        > h3 {
          color: #333;
          font-size: 19px;
          font-weight: bold;
          line-height: 28px;
        }

        > p {
          height: 20px;
          line-height: 20px;
          color: #999;
          font-size: 14px;
          margin-top: 6px;
        }
      }

      > .tips {
        height: 25px;
        // line-height: 25px;

        > span {
          display: inline-block;
          margin-top: 6px;
          margin-right: 4px;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }

  // todo 详情
  > .introduce {
    > .title {
      height: 20px;
      line-height: 20px;
      padding: 24px 0px 12px;
      margin-top: 8px;

      > h2 {
        font-size: 18px;
        height: 100%;
      }
    }

    > .content {
      max-height: 66px;
      font-size: 14px;
      line-height: 22px;
      color: #999;
      position: relative;
      overflow: hidden;

      &.s_open {
        max-height: unset;

        .btn > i {
          transform: rotate(180deg);
        }
      }

      > .btn {
        position: absolute;
        width: 48px;
        height: 24px;
        line-height: 24px;
        background: url(../assets/imgs/list1/btn_bg.png) no-repeat;
        background-size: 100%;
        bottom: 0;
        right: 0;
        text-align: right;
        font-size: 24px;

        > i {
          display: inline-block;
          transition: all 0.5s;
        }
      }
    }

    > .type {
      margin-top: 10px;

      > span {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
        background: #f5f5f5;
        border-radius: 2px;
        margin-right: 4px;
        color: #333;
        font-size: 13px;
      }
    }
  }

  // todo 最新和目录
  > .list {
    > .item {
      height: 54px;
      line-height: 54px;
      display: flex;
      justify-content: space-between;
      position: relative;

      > .title {
        color: #333;
        font-size: 17px;
        font-weight: bold;
      }

      > .info {
        display: flex;
        font-size: 14px;
        color: #999;

        > i {
          font-size: 16px;
        }
      }

      > .line {
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        background: #e5e5e5;
        transform: scaleY(0.5);
      }
    }
  }

  // todo 评论区
  > .comment {
    > .title {
      height: 20px;
      padding: 24px 0px 12px;
      line-height: 20px;
      font-size: 18px;
      margin-top: 8px;
    }

    > .content {
      padding-top: 8px;
      // display: flex;
      justify-content: space-between;

      > .item {
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px;

        > .head {
          width: 24px;
          height: 24px;
          padding-top: 8px;
          border-radius: 50%;
          overflow: hidden;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        > .text {
          flex: 1;
          padding-top: 11px;
          padding-left: 8px;

          > .name {
            height: 20px;
            line-height: 20px;
            color: #333;
            font-size: 15px;
          }

          > .com {
            padding-top: 12px;
            height: 20px;
            line-height: 20px;
            color: #999;
            font-size: 14px;
          }

          > .bottom {
            height: 18px;
            line-height: 18px;
            margin-top: 20px;
            font-size: 12px;
            color: #999;
            display: flex;
            justify-content: space-between;

            > .dp {
              display: flex;

              > .item {
                display: flex;
                align-items: center;
                margin-left: 8px;

                > span {
                  margin-left: 4px;
                }
              }
            }
          }
        }
      }
    }

    > .more {
      height: 48px;
      line-height: 48px;
      text-align: center;
      font-weight: bold;
      color: #23b383;
      font-size: 14px;
    }
  }

  // todo 推荐列表
  .l_type1 {
    box-sizing: border-box;
    padding: 8px 0 0;

    > .title {
      height: 20px;
      line-height: 20px;
      padding: 24px 0 12px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;

      > .more {
        font-size: 14px;
        color: #23b383;
      }
    }

    > .content {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;

      > .item {
        width: 32%;

        > .img {
          width: 100%;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        > .text {
          height: 36px;
          width: 100%;
          padding-top: 4px;

          > h3 {
            height: 16px;
            font-size: 13px;
            color: #333;
          }

          > p {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
          }
        }
      }
    }
  }

  // todo 目录
  > .cata {
    width: 100%;
    height: 135px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;

    &.open {
      height: unset;
    }

    > .title {
      width: 100%;
      height: 54px;
      line-height: 54px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > h3 {
        font-weight: bold;
        font-size: 17px;
        color: #333;
      }

      > span {
        color: #23b383;
        font-size: 14px;
      }
    }

    > .item {
      width: calc(50% - 15px);
      height: 12px;
      line-height: 12px;
      padding: 14px 15px;
      padding-left: 0;
      position: relative;
      color: #333;
      font-size: 12px;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        background: #e4e4e4;
        height: 1px;
        width: 100%;
        transform: scaleY(0.5);
      }
    }
  }

  // todo 图书信息
  > .info {
    > .title {
      height: 20px;
      line-height: 20px;
      padding: 24px 0 12px;
      margin-top: 8px;

      > h2 {
        font-size: 18px;
      }
    }

    > .content {
      padding-top: 8px;

      > dl {
        display: flex;
        padding-bottom: 8px;

        > dt {
          margin-right: 12px;
          color: #999;
        }

        > dd {
          flex: 1;
          color: #333;
        }
      }
    }
  }
}

.loadingBox {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #ccc;
  padding: 20px;
  border-radius: 4px;
  transform: translateX(-50%) translateY(-50%);
}

.bottom_bar {
  position: fixed;
  bottom: -1px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  width: 100%;
  background: #fff;
  display: flex;
  font-size: 14px;

  > .line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    transform: scaleY(0.5);
  }

  > .item1 {
    width: 50%;
    box-sizing: border-box;
    padding-left: 20px;
    color: #23b383;
    font-weight: bold;

    &.con {
      color: #ccc;
    }
  }

  > .item2 {
    flex: 1;
    margin: 6px 12px;
    line-height: 36px;
    color: #fff;
    background: #23b383;
    border-radius: 4px;
  }
}
</style>